<script setup>
import Consts from "@/const"
import * as api from "@/api/v-sys-service/sys-manage/menu/index.js";

const emits = defineEmits([
    'query',
    'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: '',
  }
})
const menuOptions = ref([])
const formData = ref({
  id: '', //菜单ID
  parentId: Consts.ROOT_NODE_ID, //父菜单ID 初始化为根节点id
  name: '',//菜单名称
  visible: 1,//菜单是否可见(1:是;0:否;)
  icon: '',//图标
  sort: 1,//排序
  type: Consts.MENU,//菜单类型 初始化为菜单
  component: '',//组件路径
  path: '',//路由路径
  redirect: '',//跳转路由路径
  perm: '',//权限标识
})

const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
  component: [
    { required: true, message: "请输入组件完整路径", trigger: "blur" },
  ],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

watch(
    props.rowData,
    (val) =>{
      if (val) Object.assign(formData.value,val,{children: null})
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {
  init_Cache()
}
const init_Cache = () => {
  api.listMenuOptions().then(({data})=>{
    menuOptions.value = data;
  })
}

const init_FormData = () => {
  formData.value = {
    id: '',
    parentId: Consts.ROOT_NODE_ID,
    name: '',
    visible: 1,
    icon: '',
    sort: 1,
    type: Consts.MENU,
    component: '',
    path: '',
    redirect: '',
    perm: '',
  }
}
const menuTypeChange = () => {

}
const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.saveOrUpdateMenu(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        emits('query')
      }
    }
  })
}
</script>

<template>
<v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure" @cancel="init_FormData">
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select
              :data="menuOptions"
              v-model="formData.parentId"
              placeholder="选择上级菜单"
              filterable check-strictly
              :render-after-expand="false"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="formData.type" @change="menuTypeChange">
            <el-radio value="CATALOG">目录</el-radio>
            <el-radio value="MENU">菜单</el-radio>
            <el-radio value="BUTTON">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type === Consts.CATALOG || formData.type === Consts.MENU">
        <el-form-item label="路由路径" prop="path">
          <el-input
              v-if="formData.type === Consts.CATALOG"
              v-model="formData.path" placeholder="system"/>
          <el-input v-else v-model="formData.path" placeholder="user" />
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="formData.type === Consts.MENU">
        <!-- 组件页面完整路径 -->
        <el-form-item
            label="页面路径" prop="component">
          <el-input
              v-model="formData.component"
              placeholder="v-sys-service/sys-menu/index">
            <template v-if="formData.type === Consts.MENU" #prepend>src/views/</template>
            <template v-if="formData.type === Consts.MENU" #append>.vue</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type === 'BUTTON'">
        <!-- 权限标识 -->
        <el-form-item label="权限标识" prop="perm">
          <el-input v-model="formData.perm" placeholder="sys:user:add" />
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type !== 'BUTTON'">
        <el-form-item label="图标" prop="icon">
          <!-- 图标选择器 -->
          <v-select-icon v-model="formData.icon" />
        </el-form-item>
      </el-col>
      <el-col v-if="formData.type === Consts.CATALOG" :span="12">
        <el-form-item label="跳转路由">
          <el-input v-model="formData.redirect" placeholder="跳转路由" />
        </el-form-item>
      </el-col>
      <el-col v-if="formData.type !== 'BUTTON'" :span="12">
        <el-form-item label="状态">
          <el-radio-group v-model="formData.visible">
            <el-radio :value="1">显示</el-radio>
            <el-radio :value="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number
              v-model="formData.sort" style="width: 100px"
              controls-position="right" :min="0"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</v-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>